2. septembra 2025Slovenčina

Preskúmajte experimentálny hook Reactu experimental_useFormStatus pre zjednodušenú správu stavu formulárov. Naučte sa implementáciu a pokročilé použitie.

Implementácia React experimental_useFormStatus: Vylepšená správa stavu formulárov

Neustále sa vyvíjajúce prostredie Reactu prináša nové nástroje a techniky na zlepšenie vývojárskeho zážitku a výkonu aplikácií. Jednou z takýchto experimentálnych funkcií je hook experimental_useFormStatus, navrhnutý na zjednodušenie správy stavu formulára, najmä v scenároch serverových akcií a progresívneho vylepšovania. Tento komplexný sprievodca podrobne preskúma hook experimental_useFormStatus a poskytne praktické príklady a poznatky pre jeho efektívne využitie.

Čo je `experimental_useFormStatus`?

Hook experimental_useFormStatus je experimentálne API, ktoré predstavil tím Reactu, aby poskytol priamočiarejší spôsob sledovania stavu odosielania formulára, najmä pri používaní serverových akcií. Pred týmto hookom si správa rôznych stavov formulára (nečinný, odosiela sa, úspech, chyba) často vyžadovala komplexnú logiku správy stavu. Cieľom experimental_useFormStatus je abstrahovať veľkú časť tejto zložitosti a poskytnúť jednoduchý a efektívny spôsob monitorovania a reagovania na stavy odosielania formulára.

Kľúčové výhody:

Zjednodušená správa stavu: Znižuje množstvo opakujúceho sa kódu potrebného na správu stavov odosielania formulára.
Vylepšený používateľský zážitok: Umožňuje responzívnejšie aktualizácie UI na základe stavu formulára.
Zlepšená čitateľnosť kódu: Robí kód súvisiaci s formulármi ľahšie pochopiteľným a udržiavateľným.
Bezproblémová integrácia so serverovými akciami: Navrhnutý tak, aby fungoval obzvlášť dobre s React Server Components a serverovými akciami.

Základná implementácia

Pre ilustráciu základnej implementácie experimental_useFormStatus si predstavme jednoduchý príklad kontaktného formulára. Tento formulár bude zbierať meno, e-mail a správu používateľa a následne ich odošle pomocou serverovej akcie.

Predpoklady

Predtým, ako sa ponoríme do kódu, uistite sa, že máte nastavený projekt v Reacte s nasledujúcim:

Verzia Reactu, ktorá podporuje experimentálne API (skontrolujte požadovanú verziu v dokumentácii Reactu).
Povolené React Server Components (typicky používané v frameworkoch ako Next.js alebo Remix).

Príklad: Jednoduchý kontaktný formulár

Tu je základný komponent kontaktného formulára:

```jsx // app/actions.js (Serverová akcia) 'use server' export async function submitContactForm(formData) { // Simulácia volania databázy alebo požiadavky na API await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'Všetky polia sú povinné.' }; } try { // Nahraďte skutočným volaním API alebo databázovou operáciou console.log('Formulár odoslaný:', { name, email, message }); return { success: true, message: 'Formulár bol úspešne odoslaný!' }; } catch (error) { console.error('Chyba pri odosielaní formulára:', error); return { success: false, message: 'Nepodarilo sa odoslať formulár.' }; } } // app/components/ContactForm.jsx (Klientsky komponent) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Meno:

E-mail:

Správa:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>Vysvetlenie</h3>

<ul>
  <li><b>Serverová akcia (<code>app/actions.js</code>):</b> Tento súbor definuje funkciu <code>submitContactForm</code>, čo je serverová akcia. Simuluje volanie API s dvojsekundovým oneskorením, aby demonštrovala asynchrónnu povahu odosielania formulára. Taktiež spracováva základnú validáciu a ošetrenie chýb.</li>
  <li><b>Klientsky komponent (<code>app/components/ContactForm.jsx</code>):</b> Tento súbor definuje komponent <code>ContactForm</code>, čo je klientsky komponent. Importuje hook <code>experimental_useFormStatus</code> a akciu <code>submitContactForm</code>.</li>
  <li><b>Použitie <code>useFormStatus</code>:</b> Vnútri komponentu <code>SubmitButton</code> sa volá <code>useFormStatus</code>. Tento hook poskytuje informácie o stave odosielania formulára.</li>
  <li><b>Vlastnosť <code>pending</code>:</b> Vlastnosť <code>pending</code> vrátená hookom <code>useFormStatus</code> indikuje, či sa formulár práve odosiela. Používa sa na zakázanie tlačidla na odoslanie a zobrazenie správy "Odosiela sa...".</li>
  <li><b>Prepojenie s formulárom:</b> Atribút <code>action</code> elementu <code>form</code> je prepojený so serverovou akciou <code>submitContactForm</code>. Tým sa Reactu povie, aby pri odoslaní formulára zavolal túto serverovú akciu.</li>
</ul>

<h2>Pokročilé použitie a úvahy</h2>

<h3>Spracovanie stavov úspechu a chyby</h3>

<p>Zatiaľ čo <code>experimental_useFormStatus</code> zjednodušuje sledovanie stavu odosielania, často je potrebné explicitne spracovať stavy úspechu a chyby. Serverové akcie môžu vrátiť dáta, ktoré indikujú úspech alebo zlyhanie, ktoré potom môžete použiť na aktualizáciu UI.</p>

<p><b>Príklad:</b></p>

```jsx
// app/components/ContactForm.jsx (Upravené)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Odosiela sa...' : 'Odoslať'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Meno:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">E-mail:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Správa:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Vysvetlenie:</b></p>

<ul>
  <li><b>Stav pre správy:</b> Zavádza sa stavová premenná <code>message</code> na uloženie výsledku vráteného serverovou akciou.</li>
  <li><b>Spracovanie výsledku:</b> Po odoslaní formulára funkcia <code>handleSubmit</code> aktualizuje stav <code>message</code> výsledkom zo serverovej akcie.</li>
  <li><b>Zobrazovanie správ:</b> Komponent zobrazuje správu na základe vlastnosti <code>success</code> výsledku, pričom aplikuje rôzne CSS triedy pre stavy úspechu a chyby.</li>
</ul>

<h3>Progresívne vylepšovanie</h3>

<p><code>experimental_useFormStatus</code> exceluje v scenároch progresívneho vylepšovania. Postupným vylepšovaním štandardného HTML formulára pomocou Reactu môžete poskytnúť lepší používateľský zážitok bez obetovania základnej funkcionality, ak JavaScript zlyhá.</p>

<p><b>Príklad:</b></p>

<p>Začnime so základným HTML formulárom:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Meno:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Správa:</label>
    <textarea id="message" name="message" required>

```

Potom ho môžete postupne vylepšiť pomocou Reactu a experimental_useFormStatus.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Použite null ako počiatočný stav, ak sa naň nespoliehate return (

Meno:

E-mail:

Správa:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>Vysvetlenie:</b></p>

<ul>
  <li><b>Počiatočný HTML formulár:</b> Súbor <code>public/contact.html</code> obsahuje štandardný HTML formulár, ktorý bude fungovať aj bez JavaScriptu.</li>
  <li><b>Progresívne vylepšovanie:</b> Komponent <code>EnhancedContactForm</code> postupne vylepšuje HTML formulár. Ak je JavaScript povolený, React prevezme kontrolu a poskytne bohatší používateľský zážitok.</li>
  <li><b>Hook <code>useFormState</code>:</b> Používa <code>useFormState</code> na správu stavu formulára a prepojenie serverovej akcie s formulárom.</li>
	<li> <b><code>state</code>:</b> Stav <code>state</code> z <code>useFormState</code> teraz obsahuje návratovú hodnotu zo serverovej akcie, ktorú je možné skontrolovať na prítomnosť správ o úspechu alebo chybe.</li>
</ul>

<h3>Medzinárodné aspekty</h3>

<p>Pri implementácii formulárov pre globálne publikum vstupuje do hry niekoľko medzinárodných aspektov:</p>

<ul>
  <li><b>Lokalizácia:</b> Uistite sa, že popisky formulárov, správy a chybové hlásenia sú lokalizované do rôznych jazykov. Nástroje ako i18next môžu pomôcť so správou prekladov.</li>
  <li><b>Formáty dátumu a čísel:</b> Spracujte formáty dátumu a čísel podľa lokality používateľa. Použite knižnice ako <code>Intl</code> alebo <code>moment.js</code> (pre formátovanie dátumu, aj keď je už považovaná za zastaranú) na správne formátovanie dátumov a čísel.</li>
  <li><b>Formáty adries:</b> Rôzne krajiny majú rôzne formáty adries. Zvážte použitie knižnice, ktorá podporuje viacero formátov adries, alebo vytvorenie vlastných polí formulára na základe lokality používateľa.</li>
  <li><b>Validácia telefónnych čísel:</b> Validujte telefónne čísla podľa medzinárodných štandardov. Knižnice ako <code>libphonenumber-js</code> s tým môžu pomôcť.</li>
  <li><b>Podpora sprava doľava (RTL):</b> Uistite sa, že rozloženie vášho formulára podporuje jazyky RTL, ako je arabčina alebo hebrejčina. Použite logické vlastnosti CSS (napr. <code>margin-inline-start</code> namiesto <code>margin-left</code>) pre lepšiu podporu RTL.</li>
  <li><b>Prístupnosť:</b> Dodržiavajte smernice pre prístupnosť (WCAG), aby ste zaistili, že vaše formuláre budú použiteľné pre ľudí so zdravotným postihnutím bez ohľadu na ich lokalitu.</li>
</ul>

<p><b>Príklad: Lokalizované popisky formulára</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/sk.json
{
  "contactForm": {
    "nameLabel": "Meno",
    "emailLabel": "E-mail",
    "messageLabel": "Správa",
    "submitButton": "Odoslať",
    "successMessage": "Formulár bol úspešne odoslaný!",
    "errorMessage": "Nepodarilo sa odoslať formulár."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Vysvetlenie:</b></p>

<ul>
  <li><b>Prekladové súbory:</b> Príklad používa <code>react-i18next</code> na správu prekladov. Samostatné JSON súbory obsahujú preklady pre rôzne jazyky.</li>
  <li><b>Hook <code>useTranslation</code>:</b> Hook <code>useTranslation</code> poskytuje prístup k prekladovej funkcii (<code>t</code>), ktorá sa používa na získavanie lokalizovaných reťazcov.</li>
  <li><b>Lokalizované popisky:</b> Popisky formulára a text tlačidla sa získavajú pomocou funkcie <code>t</code>, čím sa zabezpečí ich zobrazenie v preferovanom jazyku používateľa.</li>
</ul>

<h3>Aspekty prístupnosti</h3>

<p>Zabezpečenie prístupnosti vašich formulárov pre všetkých používateľov, vrátane tých so zdravotným postihnutím, je kľúčové. Tu sú niektoré dôležité aspekty prístupnosti:</p>

<ul>
  <li><b>Sémantické HTML:</b> Používajte sémantické HTML elementy ako <code><label></code>, <code><input></code>, <code><textarea></code> a <code><button></code> správne.</li>
  <li><b>Popisky:</b> Priraďte popisky k ovládacím prvkom formulára pomocou atribútu <code>for</code> na elemente <code><label></code> a atribútu <code>id</code> na ovládacom prvku formulára.</li>
  <li><b>ARIA atribúty:</b> Používajte ARIA atribúty na poskytnutie dodatočných informácií asistenčným technológiám. Napríklad použite <code>aria-describedby</code> na prepojenie ovládacieho prvku formulára s popisom.</li>
  <li><b>Spracovanie chýb:</b> Jasne označte chyby a poskytnite užitočné chybové hlásenia. Použite ARIA atribúty ako <code>aria-invalid</code> na označenie neplatných ovládacích prvkov formulára.</li>
  <li><b>Klávesnicová navigácia:</b> Uistite sa, že používatelia môžu navigovať formulárom pomocou klávesnice. V prípade potreby použite atribút <code>tabindex</code> na ovládanie poradia zamerania.</li>
  <li><b>Farebný kontrast:</b> Zabezpečte dostatočný farebný kontrast medzi textom a farbami pozadia.</li>
  <li><b>Štruktúra formulára:</b> Používajte jasnú a konzistentnú štruktúru formulára. Zoskupujte súvisiace ovládacie prvky formulára pomocou elementov <code><fieldset></code> a <code><legend></code>.</li>
</ul>

<p><b>Príklad: Prístupné spracovanie chýb</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Odosiela sa...' : 'Odoslať'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Základná validácia na strane klienta
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Meno je povinné.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'E-mail je povinný.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Správa je povinná.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Vymazať predchádzajúce chyby
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Meno:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">E-mail:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Správa:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Vysvetlenie:</b></p>

<ul>
  <li><b>Stav chýb:</b> Komponent udržiava stav <code>errors</code> na sledovanie validačných chýb.</li>
  <li><b>Validácia na strane klienta:</b> Funkcia <code>handleSubmit</code> vykonáva základnú validáciu na strane klienta pred odoslaním formulára.</li>
  <li><b>ARIA atribúty:</b> Atribút <code>aria-invalid</code> je nastavený na <code>true</code>, ak existuje chyba pre konkrétny ovládací prvok formulára. Atribút <code>aria-describedby</code> prepája ovládací prvok formulára s chybovou správou.</li>
  <li><b>Chybové správy:</b> Chybové správy sa zobrazujú vedľa príslušných ovládacích prvkov formulára.</li>
</ul>

<h2>Potenciálne výzvy a obmedzenia</h2>

<ul>
  <li><b>Experimentálny status:</b> Keďže ide o experimentálne API, <code>experimental_useFormStatus</code> sa môže v budúcich verziách Reactu zmeniť alebo byť odstránený. Je dôležité sledovať dokumentáciu Reactu a byť pripravený v prípade potreby prispôsobiť svoj kód.</li>
  <li><b>Obmedzený rozsah:</b> Hook sa primárne zameriava na sledovanie stavu odosielania a neposkytuje komplexné funkcie na správu formulárov, ako je validácia alebo spracovanie dát. Možno budete musieť pre tieto aspekty implementovať dodatočnú logiku.</li>
  <li><b>Závislosť od serverových akcií:</b> Hook je navrhnutý tak, aby fungoval so serverovými akciami, čo nemusí byť vhodné pre všetky prípady použitia. Ak nepoužívate serverové akcie, možno budete musieť nájsť alternatívne riešenia na správu stavu formulára.</li>
</ul>

<h2>Záver</h2>

<p>Hook <code>experimental_useFormStatus</code> ponúka významné zlepšenie v správe stavov odosielania formulárov v Reacte, najmä pri práci so serverovými akciami a progresívnym vylepšovaním. Zjednodušením správy stavu a poskytnutím jasného a stručného API zlepšuje tak vývojársky, ako aj používateľský zážitok. Vzhľadom na jeho experimentálnu povahu je však kľúčové byť informovaný o aktualizáciách a potenciálnych zmenách v budúcich verziách Reactu. Porozumením jeho výhod, obmedzení a osvedčených postupov môžete efektívne využiť <code>experimental_useFormStatus</code> na vytváranie robustnejších a používateľsky prívetivejších formulárov vo vašich aplikáciách v Reacte. Nezabudnite zohľadniť osvedčené postupy v oblasti internacionalizácie a prístupnosti, aby ste vytvorili inkluzívne formuláre pre globálne publikum.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">stav formulára</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React formuláre</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimentálne API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooks</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">odosielanie formulára</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asynchrónne formuláre</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progresívne vylepšovanie</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>

Implementácia React experimental_useFormStatus: Vylepšená správa stavu formulárov

Čo je experimental_useFormStatus?

Základná implementácia

Predpoklady

Príklad: Jednoduchý kontaktný formulár

Čo je `experimental_useFormStatus`?